import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import PropTypes from 'prop-types';
import './index.scss'

export default class StatusPages extends Taro.Component {
    static defaultProps = {
        statusType: '',
        statuserro: false,
        title: '未找到相关信息',
        emptyIcon: require('../../assets/imgs/empty.png'),
        errorIcon: require('../../assets/imgs/error.png'),
        erromessage: '网络错误,点击屏幕重试',
        advicetext: '去看看',
        mt: 'mt-5',
        isbtn: false,
        isVh100: true,
        refresh: () => { }
    }
    constructor(){
        super()
    }
    render() {
        const { statusType, statuserro, isbtn, erromessage, advicetext, title, refresh, gotUnknown, mt, errorIcon, emptyIcon, isVh100} = this.props;
        return (
            <View>
                {
                    statusType == "empty" ?
                        <View className={`flex flex-c empty-box flex-item-v-center pb-5 ${isVh100 ? '':'mt-2'}`} style={{ height: isVh100 ? '100vh' : 'auto', position: isVh100 ? 'fixed':'relative'}} onClick={() => {
                                statuserro ? refresh() : ''
                            }}
                        >
                            {/* <AtIcon className={`flex flex-item-center mb-2 ${mt}`} value={statuserro ? errorIcon : emptyIcon} size='110' color='#DBDBDB'></AtIcon> */}
                            <Image className={`flex flex-item-center mb-4 ${mt}`} src={statuserro ? errorIcon : emptyIcon} ></Image>
                            {
                                statuserro === false ?
                                    <View>
                                        <Text className='ft26 mb-4 fc_999 box_s pr-4 pl-4'>{ title }</Text>
                                        {
                                            isbtn ? <View className='looklook bdr_10 flex flex-item-center fc_FFF ft28' onClick={() => { gotUnknown()}} >{{ advicetext }} </View> : null
                                        }
                                    </View > :
                                    <View>
                                        <Text className='ft26 mb-4 fc_999 box_s pr-4 pl-4'>{erromessage}</Text>
                                    </View>
                            }
                        </View > : null
                }
            </View>
        )
    }
}

StatusPages.propTypes = {
    statusType: PropTypes.string,
    statuserro: PropTypes.bool,
    title: PropTypes.string,
    emptyIcon: PropTypes.string,
    errorIcon: PropTypes.string,
    erromessage: PropTypes.string,
    advicetext: PropTypes.string,
    mt: PropTypes.string,
    isbtn: PropTypes.bool,
    isVh100: PropTypes.bool,
    refresh: PropTypes.func
}